<template>
    <div class="auth-container">
        <!-- 背景图 -->
        <div class="background"></div>

        <!-- 内容区 -->
        <div class="auth-box">
            <img src="@/assets/logo.png" class="logo" />

            <div v-if="isLogin">
                <h2 class="title">用户登录</h2>
                <el-form
                    label-width="80px"
                    :model="loginForm"
                    :rules="rules"
                    ref="loginFormRef"
                    label-position="left"
                >
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            type="password"
                            v-model="loginForm.password"
                            placeholder="请输入密码"
                        />
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                        <el-button @click="resetForm('loginForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                <div class="switch-text" @click="isLogin = false">没有账号？去注册</div>
            </div>

            <div v-else>
                <h2 class="title">用户注册</h2>
                <el-form
                    label-width="80px"
                    :model="registerForm"
                    :rules="rules"
                    label-position="left"
                    ref="registerFormRef"
                >
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="registerForm.username" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            type="password"
                            v-model="registerForm.password"
                            placeholder="请输入密码"
                        />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input
                            type="password"
                            v-model="registerForm.confirmPassword"
                            placeholder="确认密码"
                        />
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-button type="primary" @click="handleRegister">注册</el-button>
                        <el-button @click="resetForm('registerForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                <div class="switch-text" @click="isLogin = true">已有账号？去登录</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElForm, ElFormItem, ElButton, ElInput } from 'element-plus'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userRegister, userLogin } from '@/api/user'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const isLogin = ref(true)

const loginForm = reactive({
    username: '',
    password: ''
})

const registerForm = reactive({
    username: '',
    password: '',
    confirmPassword: ''
})

const loginFormRef = ref()
const registerFormRef = ref()

// 自定义密码校验
const validatePassword = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请输入密码'))
    }
    if (value.length < 6) {
        return callback(new Error('密码长度不能少于6位'))
    }
    callback()
}

// 自定义确认密码校验
const validateConfirmPassword = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请再次输入密码'))
    }
    if (value !== registerForm.password) {
        return callback(new Error('两次输入密码不一致'))
    }
    callback()
}

// 校验规则
const rules = {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    password: [{ required: true, trigger: 'blur', validator: validatePassword }],
    confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }]
}

// 登录逻辑
const handleLogin = () => {
    loginFormRef.value.validate(valid => {
        if (valid) {
            userLogin({
                userAccount: loginForm.username,
                userPassword: loginForm.password
            })
                .then(res => {
                    if (res.code === 0) {
                        userStore.fetchUserInfo()
                        localStorage.setItem('token', res.data.id)
                        ElMessage.success('登录成功')
                        router.push('/home')
                    } else {
                        ElMessage.error(res.message || '登录失败')
                    }
                })
                .catch(error => {
                    ElMessage.error(error.message || '登录失败')
                })
        }
    })
}

// 注册逻辑
const handleRegister = () => {
    registerFormRef.value.validate(valid => {
        if (valid) {
            userRegister({
                userAccount: registerForm.username,
                userPassword: registerForm.password,
                checkPassword: registerForm.confirmPassword
            })
                .then(res => {
                    if (res.code === 0) {
                        ElMessage.success('注册成功')
                        isLogin.value = true
                        resetForm('registerForm')
                    } else {
                        ElMessage.error(res.message || '注册失败')
                    }
                })
                .catch(error => {
                    ElMessage.error(error.message || '注册失败')
                })
        }
    })
}

// 重置表单
const resetForm = formName => {
    if (formName === 'loginForm') {
        loginFormRef.value.resetFields()
    } else {
        registerFormRef.value.resetFields()
    }
}
</script>

<style lang="less" scoped>
.auth-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .background {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('@/assets/Login/background.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .auth-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        padding: 40px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

        .logo {
            width: 80px;
            margin: 0 auto 20px;
            display: block;
        }

        .title {
            color: #fff;
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .el-form-item {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .el-form-item .el-button {
            flex: 1;
            margin: 0 5px;
        }

        .switch-text {
            color: #fff;
            width: 100%;
            text-align: right;
            cursor: pointer;
            font-family: 'Microsoft YaHei', sans-serif;

            &:hover {
                color: #409eff;
            }
        }
    }
}

::v-deep .el-input__inner {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);

    &::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
}

::v-deep .el-form-item__label {
    color: #fff;
}
</style>
